<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css的练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
   <style>
       /* 1、类的选择器，显示不一样的效果，大小、颜色 */
      	/* 类选择器(重点)
  用法：
       .自定名称{属性:值;} */

    /* p{
       color: blue;
    }
    .fontcolor{
        color: tomato;
    }
    .fontsize{
        font-size: 50px;
    } */


    /* ２	标签指定式选择器（重点）
  用法：
  标签名.选择器名{属性:值;  属性:值;}

 特点关系：  既。。。又。。。。 */
 
    .one{
        color: red;
    }

    p.two{
      color: blue;
    }
    div#three{
        color: aqua;
    }
    /* ３、	后代选择器（重点）
   特点：
    标签之间必须属于嵌套关系。
  
  用法：
   选择器 +空格+ 选择器{属性:值;  属性:值;...}
 
特点：
选择器之间必须有空格

关系：
    父与子的关系 */


    p.one span{
		    	color: red;
		    	font-size: 30px;
		    }
 /* 并集选择器
      选择器,选择器,选择器{属性:值;}
 注意：
   标签之间不一定是并列关系！！！ */
   div,p,span{
			 	 color: red;
			 }
			



   </style>


</head>
<body>
     <!-- <p>小屁孩</p>
    <p class="fontcolor">小哥哥</p>
    <p class="fontsize">小姐姐</p>  -->

    <p class="one">小屁孩</p>
    <p class="two">小哥哥</p>
    <p class="one">小姐姐</p>
    
    <div id="three">小弟弟</div>


    <p class="one">
            <span>
                文字
            </span>
     </p>
 

     <p class="two">
          <span>
              文字
          </span>
     </p>

     <div>123</div>
     <p>567</p>
     <span>asdf</span>

     <strong>asdf</strong>





</body>
</html>